import './style.scss';
// Import Swiper styles
import Docker from '../../components/Docker';
import type { ResponseType } from './types';
import Banner from './components/Banner';
import Category from './components/Category';
import Card from './components/Card';
import { useEffect, useState } from 'react';
import useRequest from '../../hooks/useRequest';
// import Modal, {ModalInterfaceType} from '../../components/Modal';
// import {message} from '../../utils/message';

// 默认请求数据
const defaultRequestData = {
  url: '/home.json',
  method: 'POST',
  data: {
    latitude: 37.7304167, // 纬度
    longitude: -122.384425 // 经度
  }
}
// 
const Home = () => {
  // 页面加载前获取缓存location经纬度
  const localLocation = localStorage.getItem('location');
  const locationHistory = localLocation ? JSON.parse(localLocation) : null;
  if (locationHistory) {
    defaultRequestData.data.latitude = locationHistory.latitude;
    defaultRequestData.data.longitude = locationHistory.longitude;
  }
  // console.log('locationHistory', locationHistory)
  /**
   * location位置【昌平店】
   * 前端要获取当前所在的位置发给后端，后端拿到位置信息后，返回这个位置相关的信息
   * 所以在请求后端接口的时候，前端首先要获取一下，当前所处位置的经纬度
   * 经纬度最终要拼接到request发送请求的请求体中
   */
  const [requestData, setRequestData] = useState(defaultRequestData); // requestData里面就是经纬度信息
  const { data } = useRequest<ResponseType>(requestData);
  // console.log(22, data?.data.location.address)
  // const modalRef = useRef<ModalInterfaceType>(null);
  // 当经纬度发生变化的时候，我们要发请求获取页面要展示的内容
  // useEffect(()=>{ // 这部分功能被封装到了useRequest文件第74行
  //   request().then((data)=>{
  //     console.log(data)
  //   }).catch((e)=>{
  //     console.log('error=', e?.message)
  //     message(e?.message);
  //   })
  // }, [requestData, request])
  // 获取经纬度信息
  useEffect(() => {
    // 刚开始进入到页面，没有地理定位到时候，就去获取定位，存到本地存储里，如果有了，locationHistory 就一定是true
    // !locationHistory 就不需要去存储一次location
    if (navigator.geolocation && !locationHistory) {
      // 接收2个回调函数，成功的回调函数，失败的回调函数，
      // 接收1个配置参数
      navigator.geolocation.getCurrentPosition((position) => {
        // console.log(111, position); ////包含位置的经纬度、速度、海拔、经纬度精度、海拔精度信息
        const { coords } = position;
        const { latitude, longitude } = coords;
        /**
         * 是否用户每次进入到这个页面都要获取它的定位呢，一般来说可以保留，
         * 自己想切换的时候再切也可以，但是每次都请求容易卡顿，不是每次都能请求到，有时候可能要请求几次，
         * 可以选择，缓存的方式，如果用户登陆到过这个站点，做过这个定位，我们可以选择一直用这个定位做它的初始值定位
         * 不再重新请求，这样页面的流畅度会高一些
         */
        console.log('defaultRequestData', defaultRequestData);
        // 如果获取到定位，那么将定位做一个本地存储
        localStorage.setItem('location', JSON.stringify({
          latitude, longitude
        }))
        setRequestData({
          ...defaultRequestData,
          data: {
            latitude, longitude
          }
        })
      }, (e) => {
        console.log('error=', e); // //获取失败的原因
        // message(e?.message);
        // modalRef.current?.showMessage(e?.message || '未知异常')
      }, {
        //可增加的4个配置参数
        timeout: 500, //获取多久后就不打算获取了，即超时时间范围，超时时间,以ms为单位,这里1s后就不打算再获取了
        // enableHighAccuracy:true,//高精度
        // maximumAge:24*60*60*1000,//位置缓存时间,以ms为单位
      })
    }
  }, [locationHistory])
  let location, banners, categories, freshes = undefined;
  const dataResult = data?.data;
  if(dataResult){
    location = dataResult.location;
    banners = dataResult.banners;
    categories = dataResult.categories;
    freshes = dataResult.freshes;
  }
  return (
    <div className="page home-page">
      <Banner location={location} banners={banners} />
      <Category categories={categories}  />
      <Card title='新品尝鲜' list={freshes} />
      <div className="bottom">
        - 我是有底线的 -
      </div>
      <Docker activeName="home" />
    </div>
  )
}

export default Home;